<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
		<style type="text/css">
			body {
				background: #ffffff;
			}
			.aui-slide-node img {
				width: 100%;
				height: auto;
			}
			.aui-title img {
				height: 2rem;
				margin-left: 2rem;
				margin-top: 0.12 rem;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="aui-slide3">
				<div class="aui-slide-wrap" >
					<div class="aui-slide-node">
						<img src="../image/l1.jpg" />
					</div>
					<div class="aui-slide-node">
						<img src="../image/l2.jpg" />
					</div>
					<div class="aui-slide-node">
						<img src="../image/l3.jpg" />
					</div>
				</div>
				<div class="aui-slide-page-wrap">
					<!--分页容器-->
				</div>
			</div>
			<div class="aui-content aui-margin-b-15">
				<ul id="ularticle" class="aui-list aui-media-list aui-list-noborder">
					<li class="aui-list-item" v-for="item in article_list" v-on:click="openWin(item.id);">
						<div class="aui-media-list-item-inner">
							<div class="aui-list-item-media" style="width:5.25rem;padding-top: 0.75rem;">
								<img :src="item.coverImgOne">
							</div>
							<div class="aui-list-item-inner">
								<div class="aui-list-item-text">
									<div class="aui-list-item-title aui-font-size-16">
										{{item.title}}
									</div>
								</div>
								<div class="aui-info aui-padded-b-0">
									<div class="aui-info-item aui-font-size-12">
										<span>{{item.author}}</span>
									</div>
									<div class="aui-info-item aui-font-size-12">
										{{item.addTimeDesc}}
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</body>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/vue.min.js" ></script>
	<script type="text/javascript" src="../script/aui-slide.js"></script>
	<script type="text/javascript">
		var vm;
		var pageIndex = 1;
		var slide3 = new auiSlide({
			container : document.getElementById("aui-slide3"),
			//"width":100,
			"height" : 220,
			"speed" : 800,
			"autoPlay" : 3000, //自动播放
			"loop" : true,
			"pageShow" : true,
			"pageStyle" : 'dot',
			'dotPosition' : 'center'
		});
		apiready = function() {
			api.showProgress({
				title : '努力加载中...',
			});
			vm = new Vue({
				el : '#content',
				data : {
					article_list : []
				},
				ready : function() {
					$api.get('http://mu.biachina.com/api/article/list-summary', function(ret) {
						ret.list.sort(function(x, y) {
							return !x.onTop;
						});
						vm.article_list.push.apply(vm.article_list, ret.list);
						//				  	var interText = doT.template($api.byId("articletmpl").text);
						//				  	$api.html($api.byId("ularticle"),interText(ret.list));
						api.hideProgress();
					}, 'json');
				},
				methods : {
					openWin : function(id) {
						var delay = 0;
						if (api.systemType != 'ios') {
							delay = 300;
						}
						api.openWin({
							name : 'article',
							url : 'article_win.html',
							bounces : false,
							delay : delay,
							slidBackEnabled : true,
							vScrollBarEnabled : false,
							pageParam : {
								id : id
							}
						});
					}
				}
			});
			//下拉刷新
			api.setRefreshHeaderInfo({
				loadingImg : 'widget://image/refresh.png',
				bgColor : '#f4f4f4',
				textColor : '#a4a4a4',
				showTime : false
			}, function(ret, err) {
				//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
				setTimeout(function() {
					api.refreshHeaderLoadDone();
				}, 3000);
			});
			//上拉加载更多
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				pageIndex++;
				//alert(ret);
				//do ajax function
				/*
				 $api.removeCls($api.byId("liaddmore"), 'aui-hide');
				 setTimeout(function(){
				 $api.addCls($api.byId("liaddmore"), 'aui-hide');
				 }, 3000);*/
				$api.get('http://mu.biachina.com/api/article/list-summary?pageIndex=' + pageIndex.toString(), function(ret) {
					ret.list.sort(function(x, y) {
						return !x.onTop;
					});
					vm.article_list.push.apply(vm.article_list, ret.list);
					//				  	var interText = doT.template($api.byId("articletmpl").text);
					//				  	$api.html($api.byId("ularticle"),interText(ret.list));
					api.hideProgress();
				}, 'json');
			});
		}
		//var dataInter = [{"id":"z1","content":"<h3>2011年</h3><p><img src=\"../image/l2.png\" /></p>"},{"id":"z2","content":"<h3>2012年</h3><p><img src=\"../image/l2.png\" /></p>"}];
	</script>
</html>